<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3_react生命周期(新)</title>
    <!-- 引入 react核心库 -->
    <script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
    <!-- 引入 react-dom 用于支持操作DOM -->
    <script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
    <!-- 引入 babel 用于将 jsx转为 js -->
    <script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">

    /*
        1.初始化阶段:由ReactDoM.render()触发---初次渲染
            1、constructor()
            2、getDerivedstateFromProps
            3、render()	4、componentDidMount()=====>常用
		一般在这个钩子中做一些初始化的事，例如:开启定时器、发送网络请求、订阅消息
        2.更新阶段:由组件内部this.setsate()或父组件重新render触发
            1、getDerivedstateFromProps
            2、shouldComponentUpdate()
            3、render()
            4、getsnapshotBeforeUpdate
            5、componentDidupdate()

        3.卸载组件: ReactDoM.unmountComponentAtNode()触发
            componentWillUnmount()=====>常用
            一般在这个钩子中做一些收尾的事，例如:关闭定时器、取消订阅消息
     */

    class Sum extends React.Component {

        // 构造器
        constructor(props) {
            console.log("组件构造器执行 ==== constructor");
            super(props);
            // 初始化状态
            this.state = {count: 0}
        }

        // +1按钮回调
        add = () => {
            const {count} = this.state;
            this.setState({count: count + 1});
        }

        death = () => {
            console.log("卸载组件 ==== death");
            ReactDOM.unmountComponentAtNode(document.getElementById("test"));
        }

        force = () => {
            console.log("强制更新组件 ==== force");
            this.forceUpdate();
        }


        // 组件将要挂载的钩子
        UNSAFE_componentWillMount () {
            console.log("组件将要挂载 === componentWillMount");
        }

        // 组件挂载完毕的钩子
        componentDidMount() {
            console.log("组件挂载完毕 === componentDidMount");
        }

        // 组件将要卸载的钩子
        componentWillUnmount() {
            console.log("组件将要卸载 === componentWillUnmount");
        }

        // 控制组件更新的 “阀门”
        shouldComponentUpdate() {
            console.log("组件是否将要被更新 === shouldComponentUpdate");
            return false;
        }


        // 组件将要更新的钩子
        UNSAFE_componentWillUpdate() {
            console.log("组件将要被更新 === componentWillUpdate");
        }

        // 组件更新完毕的钩子
        componentDidUpdate() {
            console.log("组件更新完毕 === comonentDidUpdate");
        }

        render() {
            console.log("渲染组件 === render")
            const {count} = this.state;
            return (
                <div>
                    <h2>当前求和为: {count} </h2>
                    <button onClick={this.add}>点我+1</button>
                    <button onClick={this.death}>卸载组件</button>
                    <button onClick={this.force}>不更改任何状态中的数据强制更新</button>
                </div>
            )
        }
    }

    ReactDOM.render(<Sum />, document.getElementById("test"));
</script>
</body>
</html>